<template>
  <div id="line"></div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'LineDate',
  mounted() {
    var linechartDom = document.getElementById('line')
    var lineChart = echarts.init(linechartDom)
    var lineoption
    //给methods使用
    this.echartInstance = lineChart

    lineoption = {
      title: {
        text: '中国疫情趋势图'
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        type: 'scroll',
        right:'center',
        data: ['确诊人数', '隔离人数', '治愈人数', '死亡人数', '疑似人数']
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      toolbox: {
        feature: {
          saveAsImage: {}
        }
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '确诊人数',
          type: 'line',
          stack: 'Total',
          data: []
        },
        {
          name: '隔离人数',
          type: 'line',
          stack: 'Total',
          data: []
        },
        {
          name: '治愈人数',
          type: 'line',
          stack: 'Total',
          data: []
        },
        {
          name: '死亡人数',
          type: 'line',
          stack: 'Total',
          data: []
        },
        {
          name: '疑似人数',
          type: 'line',
          stack: 'Total',
          data: []
        }
      ]
    }
    this.$http.get('/covid/queryline').then((res) => {
      console.log(res)
      lineoption.series[0].data = res.data.confimeList
      lineoption.series[1].data = res.data.isolationList
      lineoption.series[2].data = res.data.cureList
      lineoption.series[3].data = res.data.deadList
      lineoption.series[4].data = res.data.similarList
      lineChart.setOption(lineoption)
    })
    window.addEventListener('resize', this.resizeHandle)
  },
  methods: {
    // 绑定监听事件
    resizeHandle() {
      // let _this = this
      this.echartInstance.resize()
      // barChart.resize()
    }
  },
  unmounted() {
    console.log('清理内存line,防止内存泄漏')
    window.removeEventListener('resize', this.resizeHandle)
  }
}
</script>

<style lang="less" scoped>
#line {
  height: 500px;
}
</style>